import 'package:flutter/material.dart';

import 'package:flutter_hooks/flutter_hooks.dart';
// 适配像素
import 'package:make_list/utiles/adapation.dart';
// 背景盒子
import 'package:make_list/components/bg_img_box.dart';

class MyList extends HookWidget {
  const MyList({super.key, this.openHomeDrawer});
  final void Function()? openHomeDrawer;
  @override
  Widget build(BuildContext context) {
    // 初始化AdaptSize
    AdaptSize.initialize(context);
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.all(AdaptSize.px(15.5)),
            child: Image.asset(
              'assets/images/home_header.png',
              width: AdaptSize.px(277.5),
              height: AdaptSize.px(72.5),
            ),
          ),
          const Homecalendar(),
          const SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                onTap: () {
                  openHomeDrawer!();
                },
                child: BgImgBox(
                  assetImage: 'assets/images/home_left.png',
                  width: AdaptSize.px(85),
                  height: AdaptSize.px(22),
                  padding: const EdgeInsets.only(right: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text('All'),
                      Image.asset(
                        'assets/images/home_list.png',
                        width: AdaptSize.px(10),
                        height: AdaptSize.px(10),
                      ),
                    ],
                  ),
                ),
              ),
              Row(
                children: [
                  Image.asset(
                    'assets/images/home_eye.png',
                    width: AdaptSize.px(11),
                    height: AdaptSize.px(8.5),
                  ),
                  Text(
                    'Displays Completed',
                    style: TextStyle(fontSize: AdaptSize.px(12)),
                  )
                ],
              )
            ],
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView(
                children: [
                  const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ListItemCard(
                        title: 'Urgency is not important',
                        color: Color(0xFFF9C161),
                      ),
                      ListItemCard(
                        title: 'Urgency is not important',
                        color: Color(0xFFD14E4E),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                        margin: const EdgeInsets.symmetric(vertical: 5),
                      ),
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                        margin: const EdgeInsets.symmetric(vertical: 5),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                        margin: const EdgeInsets.symmetric(vertical: 5),
                      ),
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                        margin: const EdgeInsets.symmetric(vertical: 5),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                      ),
                      BgImgBox(
                        assetImage: 'assets/images/home_card.png',
                        width: AdaptSize.px(167.5),
                        height: AdaptSize.px(187.5),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 笔记卡片
class ListItemCard extends HookWidget {
  const ListItemCard({super.key, this.color = Colors.grey, this.title = ''});
  final String title;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return BgImgBox(
      assetImage: 'assets/images/home_card.png',
      width: AdaptSize.px(167.5),
      height: AdaptSize.px(187.5),
      padding: const EdgeInsets.only(top: 18, right: 8, left: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(
            title,
            style: TextStyle(fontSize: AdaptSize.px(12), color: color),
          ),
          Divider(
            indent: 20,
            thickness: 2,
            color: color,
          ),
          Row(
            children: [
              Icon(
                Icons.check_circle,
                color: color,
                size: AdaptSize.px(13),
              ),
              const Text(
                '12312312312',
              )
            ],
          ),
          DashedLind(
            color: color,
            axis: Axis.horizontal,
            dashedWidth: 3,
            count: 30,
          ),
          Row(
            children: [
              Icon(
                Icons.circle_outlined,
                size: AdaptSize.px(13),
                color: color,
              ),
              const Text(
                '12312312312',
              )
            ],
          ),
          DashedLind(
            axis: Axis.horizontal,
            dashedWidth: 3,
            count: 30,
            color: color,
          ),
        ],
      ),
    );
  }
}

// 自定义虚线 （默认是垂直方向）
class DashedLind extends StatelessWidget {
  final Axis axis; // 虚线方向
  final double dashedWidth; // 根据虚线的方向确定自己虚线的宽度
  final double dashedHeight; // 根据虚线的方向确定自己虚线的高度
  final int count; // 内部会根据设置的个数和宽度确定密度(虚线的空白间隔)
  final Color color; // 虚线的颜色

  const DashedLind(
      {super.key,
      required this.axis,
      this.dashedWidth = 1,
      this.dashedHeight = 1,
      this.count = 10,
      this.color = const Color(0xffaaaaaa)});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      // 根据宽度计算个数
      return Flex(
        direction: axis,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.generate(count, (_) {
          return SizedBox(
            width: dashedWidth,
            height: dashedHeight,
            child: DecoratedBox(
              decoration: BoxDecoration(color: color),
            ),
          );
        }),
      );
    });
  }
}

class Homecalendar extends HookWidget {
  const Homecalendar({super.key, this.bgColor = const Color(0xFFFFFFFF)});
  final Color bgColor;
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      // height: 100,
      padding: EdgeInsets.symmetric(horizontal: AdaptSize.px(24)),
      decoration: BoxDecoration(boxShadow: const [
        BoxShadow(
          color: Color.fromARGB(255, 231, 231, 231),
          offset: Offset(0, 5),
          blurRadius: 5,
        ),
      ], color: bgColor),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '2023',
            style: TextStyle(
              fontSize: AdaptSize.px(17),
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            'September 6',
            style: TextStyle(
              fontSize: AdaptSize.px(17),
              fontWeight: FontWeight.bold,
            ),
          )
        ],
      ),
    );
  }
}
